import React, {useEffect, useState} from 'react';
import {Button, Descriptions} from 'antd';
import type {DescriptionsProps} from 'antd';
import {connect, Link} from "umi";

import UserInfoModal from "@/pages/users/components/userInfo/components/UserInfoModal";
import {LeftCircleOutlined} from "@ant-design/icons";

const UserInfo = (props) => {
  const {id} = props.location.state
  const {users: {data}, dispatch} = props

  const [visible, setVisible] = useState(false)
  const [avatar, setAvatar] = useState(undefined)
  const [address, setAddress] = useState(undefined)

  useEffect(() => {
    dispatch({
      type: 'users/getUserInfoById',
      payload: id,
    })
  }, [])

  const items: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '用户名',
      children: (<div className="item">{data.userName}</div>),
    },
    {
      key: '2',
      label: '姓名',
      children: (<div className="item">{data.name}</div>),
    },
    {
      key: '3',
      label: '头像',
      children: (<img src={data.avatar} width="80px"/>),
    },
    {
      key: '4',
      label: '性别',
      children: (<div className="item">{data.gender}</div>),
    },
    {
      key: '5',
      label: '电话',
      children: (<div className="item">{data.phone}</div>),
    },
    {
      key: '6',
      label: '邮箱',
      children: (<div className="item">{data.email}</div>),
    },
    {
      key: '7',
      label: '地址',
      span: 2,
      children: (<div className="item">{data.address}</div>),
    },
    {
      key: '8',
      label: '创建时间',
      children: (<div className="item">{data.createTime}</div>),
    },
    {
      key: '9',
      label: '描述',
      children: (
        <>
          <div className="item">{data.description}</div>
        </>
      ),
    },
  ];

  const closeHandler = () => {
    setVisible(false)
  }

  const onFinish = (values) => {
    dispatch({
      type: 'users/editRecord',
      payload: {
        id: data.id,
        userName: values.userName,
        name: values.name,
        gender: values.gender,
        email: values.email,
        description: values.description,
        avatar: avatar,
        address: address
      },
    }).then(() => {
      setVisible(false)
      dispatch({
        type: 'users/getUserInfoById',
        payload: id,
      })
    })
  }

  return (
    <>
      <div>
        <div>
            {/*
          <div style={{textAlign: "center",fontSize: "35px" , marginBottom: "10px", height: "75px", width: "100%", background: "#fff", padding: "10px", border: "1px solid #ebeef5", borderRadius: "3px"}}>
            用户信息详情
          </div>*/}
          <div style={{height: "55px", margin: "10px 0", width: "100%", background: "#fff", padding: "10px", border: "1px solid #ebeef5", borderRadius: "3px"}}>
            <Link style={{float: "left"}} to="/users">
              <Button><LeftCircleOutlined />返回</Button>
            </Link>
            <Button style={{float: "right"}} type="primary" onClick={setVisible}>修改信息</Button>
          </div>
          <div className="description">
            <Descriptions layout="vertical" bordered items={items} labelStyle={{fontSize: "large", color: "#529efc"}}/>
          </div>
          <div>
            <UserInfoModal setAddress={setAddress} setAvatar={setAvatar} onFinish={onFinish} visible={visible} closeHandler={closeHandler} record={data}/>
          </div>
        </div>
      </div>
    </>
  )
}

const mapStateToProps = ({users}) => {
  return {
    users,
  }
}

export default connect(mapStateToProps)(UserInfo)
